<template>
  <div>
    <div>
      <el-steps :active="active" align-center finish-status="success">
        <el-step title="商品基本信息" />
        <el-step title="添加库存信息" />
        <el-step title="添加移动端详情" />
      </el-steps>

    </div>
    <div class="content margin30">
      <el-form ref="form" :model="form" label-width="80px" :inline="false" size="mini">

        <div v-if="active == 1">
          <el-card shadow="always" :body-style="{ padding: '20px' }">

            <div>基本信息</div>
            <el-divider />
            <el-row :gutter="20">
              <el-col :span="8" :offset="0">
                <el-form-item label="商品名称">
                  <el-input v-model="form.product.name" placeholder="请输入商品名称" />
                </el-form-item>
              </el-col>
              <el-col :span="8" :offset="0">
                <el-form-item label="商品编码">
                  <el-input v-model="form.product.productSn" />
                </el-form-item>
              </el-col>
              <el-col :span="8" :offset="0">
                <el-form-item label="商品分类">
                  <el-select v-model="form.product.productCategoryId" value-key="" placeholder="" clearable filterable @change="getCategoryName">
                    <el-option
                      v-for="item in leju"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

            </el-row>
            <el-row :gutter="20">
              <el-col :span="8" :offset="0">
                <el-form-item label="商品品牌">
                  <el-select v-model="form.product.brandId" value-key="" placeholder="" clearable filterable @change="getBrandName">
                    <el-option
                      v-for="item in brandList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="15" :offset="0">
                <el-form-item label="商品描述">
                  <el-input
                    v-model="form.product.description"
                    type="textarea"
                    :rows="2"
                    placeholder="请输入内容"
                  />
                </el-form-item>
              </el-col>
            </el-row>

          </el-card>

        </div>
        <div v-else-if="active == 2">
          <div>
            商品sku信息
          </div>
          <el-divider />
          <el-row :gutter="20">
            <el-col :span="15" :offset="0">
              <el-form-item label="画册图片">
                <el-upload
                  action="/lejuAdmin/material/uploadFileOss"
                  :headers="headers"
                  list-type="picture-card"
                  :on-success="uploadImg"
                  :file-list="fileList"
                >
                  <i slot="default" class="el-icon-plus" />
                  <div slot="file" slot-scope="{file}">
                    <img
                      class="el-upload-list__item-thumbnail"
                      :src="file.url"
                      alt=""
                    >
                    <span class="el-upload-list__item-actions">
                      <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)"
                      >
                        <i class="el-icon-zoom-in" />
                      </span>
                      <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleDownload(file)"
                      >
                        <i class="el-icon-download" />
                      </span>
                      <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleRemove(file)"
                      >
                        <i class="el-icon-delete" />
                      </span>
                    </span>
                  </div>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24" :offset="0">
              <el-form-item label="sku设置">
                <div v-if="colorList.length">
                  颜色:  <el-checkbox
                    v-for="item in colorList"
                    :key="item.id"
                    v-model="item.isSelected"
                  >{{ item.name }}<el-link type="warning">删除</el-link>
                  </el-checkbox>
                </div>
                <div v-if="sizeList.length">
                  大小:  <el-checkbox
                    v-for="item in sizeList"
                    :key="item.id"
                    v-model="item.isSelected"
                  >{{ item.name }}<el-link type="warning">删除</el-link>
                  </el-checkbox>
                </div>
                <el-row>
                  <el-col :span="16" :offset="0">
                    <el-row>
                      <el-col :span="6" :offset="0">
                        <el-input v-model.trim="color" placeholder="颜色描述：比如土豪金" size="mini" clearable @change="" />

                      </el-col>
                      <el-col :span="3" :offset="1">
                        <el-button type="primary" size="mini" @click="addColor">创建颜色选项</el-button>

                      </el-col>

                      <el-col :span="6" :offset="0">
                        <el-input v-model.trim="size" placeholder="大小" size="mini" clearable @change="" />

                      </el-col>
                      <el-col :span="6" :offset="0">
                        <el-button type="primary" size="mini" @click="addSize">创建大小选项</el-button>

                      </el-col>

                    </el-row></el-col>
                  <el-col :span="7" :offset="0">
                    <el-button type="primary" size="mini" @click="addSku">生成sku</el-button>
                    <el-button type="primary" size="mini" @click="">新增sku</el-button>
                  </el-col>
                </el-row>

              </el-form-item>
            </el-col>
          </el-row>
          <el-table v-if="form.pmsSkuStockList.length" :data="form.pmsSkuStockList" border stripe>
            <el-table-column
              prop="id"
              type="index"
              label="#"
            />
            <el-table-column
              label="图片"
            >
              <template v-slot="scope">
                <el-upload
                  action="/lejuAdmin/material/uploadFileOss"
                  :headers="headers"
                  :show-file-list="false"
                  :on-success="el=>getUploadImg(el,scope.$index)"
                >
                  <i v-if="!scope.row.pic" class="el-icon-plus" />
                  <img v-else :src="scope.row.pic" alt="">
                </el-upload>
              </template>
            </el-table-column>
            <el-table-column
              prop="id"
              label="颜色"
            >
              <template v-slot="scope">
                <el-input v-model="scope.row.spData[0].value" size="mini" />

              </template>
            </el-table-column>
            <el-table-column
              prop="id"
              label="大小"
            >
              <template v-slot="scope">
                <el-input v-model="scope.row.spData[1].value" size="mini" />

              </template>
            </el-table-column>
            <el-table-column
              prop="id"
              label="库存"
            >
              <template v-slot="scope">
                <el-input v-model="scope.row.stock" size="mini" />

              </template>
            </el-table-column>
            <el-table-column
              prop="id"
              label="预警库存"
            >
              <template v-slot="scope">
                <el-input v-model="scope.row.lowStock" size="mini" />

              </template>
            </el-table-column>
            <el-table-column
              prop="id"
              label="锁定库存"
            >
              <template v-slot="scope">
                <el-input v-model="scope.row.lockStock" size="mini" />

              </template>
            </el-table-column>
            <el-table-column
              prop="id"
              label="sku编码"
            >
              <template v-slot="scope">
                <el-input v-model="scope.row.skuCode" size="mini" />

              </template>
            </el-table-column>
            <el-table-column
              prop="id"
              label="价格"
            >
              <template v-slot="scope">
                <el-input v-model="scope.row.price" size="mini" />

              </template>
            </el-table-column>
            <el-table-column
              prop="id"
              label="销量"
            >
              <template v-slot="scope">
                <el-input v-model="scope.row.sale" size="mini" />

              </template>
            </el-table-column>
          </el-table>

        </div>
        <div v-else>详情描述</div>

      </el-form>

    </div>
    <div class="btnGroup">
      <el-button v-if="active != 1" type="primary" size="mini" @click="active --">返回上一步</el-button>
      <el-button v-if="active == 1 || active == 2" type="primary" size="mini" @click="active ++">下一步,填写{{ active == 1 ? '库存信息':'移动端详情' }}</el-button>
      <el-button v-if="active == 3" type="primary" size="mini" @click="save">提交保存</el-button>
    </div>
  </div>
</template>

<script>
import {
  getAllCategory
} from '@/api/goodsManage/category/index.js'
import {
  findAllBrand
} from '@/api/goodsManage/list'
import {
  addProductAndSkus,
  productSkusDetail,
  updateProductAndSkus
} from '@/api/goodsManage/list/add'
import {
  getToken
} from '@/utils/myAuth.js'
export default {
  data() {
    return {
      headers: {
        'token': getToken()
      },
      active: 1,
      leju: [], // 商品分类
      brandList: [], // 商品品牌
      color: '',
      colorList: [
        {
          name: '红色',
          isSelected: false,
          id: 1
        },
        {
          name: '蓝色',
          isSelected: false,
          id: 2
        }
      ],
      size: '',
      sizeList: [
        {
          name: '64g',
          isSelected: false,
          id: 1
        },
        {
          name: '128g',
          isSelected: false,
          id: 2
        }
      ],
      fileList: [],
      form: {
        'pmsSkuStockList': [ // sku

        ],
        'product': { // 基本信息
          'albumPics': '', //
          'brandId': '',
          'brandName': '',
          'createTime': '', // 2020-12-15 19:35:20
          'deleteStatus': '',
          'description': '',
          'detailDesc': '',
          'detailHtml': '',
          'detailMobileHtml': `<div class="descV8-container">
            
            <div class="descV8-singleImage">
        
        <img src="//img.alicdn.com/imgextra/i4/2206829987398/O1CN01L7cuKU24WKvqcIrRB_!!2206829987398.jpg" data-name="singleImage" class="descV8-singleImage-image lazyload" style="width: 750px; height: 1161.2903225806451px;">
    </div><div class="descV8-singleImage">
        
        <img src="//img.alicdn.com/imgextra/i4/2206829987398/O1CN010BxDbL24WKvtHEqfU_!!2206829987398.jpg" data-name="singleImage" class="descV8-singleImage-image lazyload" style="width: 750px; height: 1161.2903225806451px;">
    </div><div class="descV8-singleImage">
        
        <img data-src="//img.alicdn.com/imgextra/i1/2206829987398/O1CN01sJq9eY24WKvjgBJ9p_!!2206829987398.jpg" src="//g.alicdn.com/s.gif" data-name="singleImage" class="descV8-singleImage-image lazyload" style="width: 750px; height: 1161.2903225806451px;">
    </div><div class="descV8-singleImage">
        
        <img data-src="//img.alicdn.com/imgextra/i4/2206829987398/O1CN01PuL8Vd24WKvmnSP91_!!2206829987398.jpg" src="//g.alicdn.com/s.gif" data-name="singleImage" class="descV8-singleImage-image lazyload" style="width: 750px; height: 1161.2903225806451px;">
    </div><div class="descV8-singleImage">
        
        <img data-src="//img.alicdn.com/imgextra/i4/2206829987398/O1CN01Llmeuu24WKviPTi2S_!!2206829987398.jpg" src="//g.alicdn.com/s.gif" data-name="singleImage" class="descV8-singleImage-image lazyload" style="width: 750px; height: 1161.2903225806451px;">
    </div><div class="descV8-singleImage">
        
        <img data-src="//img.alicdn.com/imgextra/i2/2206829987398/O1CN01KoHHf124WKvmS2LgH_!!2206829987398.jpg" src="//g.alicdn.com/s.gif" data-name="singleImage" class="descV8-singleImage-image lazyload" style="width: 750px; height: 1161.2903225806451px;">
    </div><div class="descV8-singleImage">
        
        <img data-src="//img.alicdn.com/imgextra/i1/2206829987398/O1CN012pCRjE24WKvqcHJrY_!!2206829987398.jpg" src="//g.alicdn.com/s.gif" data-name="singleImage" class="descV8-singleImage-image lazyload" style="width: 750px; height: 1161.2903225806451px;">
    </div><div class="descV8-singleImage">
        
        <img data-src="//img.alicdn.com/imgextra/i1/2206829987398/O1CN01EfPcxR24WKvtHEmUZ_!!2206829987398.jpg" src="//g.alicdn.com/s.gif" data-name="singleImage" class="descV8-singleImage-image lazyload" style="width: 750px; height: 62.903225806451616px;">
    </div><div class="descV8-singleImage">
        
        <img data-src="https://img.alicdn.com/imgextra/i1/2206829987398/O1CN0192IHwE24WKxDimo6b_!!2206829987398.jpg" src="//g.alicdn.com/s.gif" data-name="singleImage" class="descV8-singleImage-image lazyload" style="width: 750px; height: 828.6290322580645px;">
    </div><div class="descV8-singleImage">
        
        <img data-src="https://img.alicdn.com/imgextra/i1/2206829987398/O1CN0192IHwE24WKxDimo6b_!!2206829987398.jpg" src="//g.alicdn.com/s.gif" data-name="singleImage" class="descV8-singleImage-image lazyload" style="width: 750px; height: 828.6290322580645px;">
    </div><div class="descV8-singleImage">
        
        <img data-src="https://img.alicdn.com/imgextra/i4/2206829987398/O1CN01iYYZbA24WKxAGD6QN_!!2206829987398.jpg" src="//g.alicdn.com/s.gif" data-name="singleImage" class="descV8-singleImage-image lazyload" style="width: 750px; height: 1160.0806451612902px;">
    </div><div class="descV8-singleImage">
        
        <img data-src="https://img.alicdn.com/imgextra/i2/2206829987398/O1CN01ImG1gJ24WKxDiogdR_!!2206829987398.jpg" src="//g.alicdn.com/s.gif" data-name="singleImage" class="descV8-singleImage-image lazyload" style="width: 750px; height: 1160.0806451612902px;">
    </div><div class="descV8-singleImage">
        
        <img data-src="https://img.alicdn.com/imgextra/i2/2206829987398/O1CN01neKhI124WKx3iCJuP_!!2206829987398.jpg" src="//g.alicdn.com/s.gif" data-name="singleImage" class="descV8-singleImage-image lazyload" style="width: 750px; height: 751.2096774193549px;">
    </div><div class="descV8-singleImage">
        
        <img data-src="https://img.alicdn.com/imgextra/i3/2206829987398/O1CN01KOQuTS24WKx9bQDO4_!!2206829987398.jpg" src="//g.alicdn.com/s.gif" data-name="singleImage" class="descV8-singleImage-image lazyload" style="width: 750px; height: 705.241935483871px;">
    </div><div class="descV8-singleImage">
        
        <img data-src="//gw.alicdn.com/tfs/TB1d0h2qVYqK1RjSZLeXXbXppXa-1125-960.png?getAvatar=avatar" src="//g.alicdn.com/s.gif" data-name="singleImage" class="descV8-singleImage-image lazyload" style="width: 750px; height: 640px;">
    </div>
        </div>`, // 前端项目富文本部分
          'detailTitle': '小米11 Pro',
          'feightTemplateId': '',
          'giftGrowth': '',
          'giftPoint': '',
          'id': '',
          'keywords': '小米11,小米11Pro,小米',
          'lowStock': '',
          'modifyTime': '',
          'name': '',
          'newStatus': 1,
          'note': '8折促销中',
          'originalPrice': 1000,
          'pic': 'https://gw.alicdn.com/bao/uploaded/i4/2206829987398/O1CN01mK87IF24WKx828PJJ_!!2206829987398.jpg_Q75.jpg_.webp',
          'previewStatus': 0,
          'price': 1000,
          'productAttributeCategoryId': '',
          'productCategoryId': '',
          'productCategoryName': '',
          'productSn': '',
          'promotionEndTime': '',
          'promotionPerLimit': '',
          'promotionPrice': '',
          'promotionStartTime': '',
          'promotionType': '',
          'publishStatus': 1,
          'recommendStatus': 1,
          'sale': '',
          'serviceIds': '1,2,3',
          'sort': '999',
          'stock': '',
          'subTitle': '小米11',
          'unit': '',
          'usePointLimit': '',
          'verifyStatus': 1,
          'weight': 1
        }
      }
    }
  },
  computed: {

  },
  created() {
    if (this.$route.params.id1) {
      productSkusDetail(this.$route.params.id1)
        .then(res => {
          console.log(res)
          this.form.product = res.data.product
          res.data.skus.forEach(el => {
            el.spData = JSON.parse(el.spData)
          })

          res.data.product.albumPics.split(',').forEach(ele => {
            var arr = ele.split('/')
            var obj = { name: arr[arr.length - 1], url: ele }
            this.fileList.push(obj)
          })
          this.form.pmsSkuStockList = res.data.skus
        })
    }

    getAllCategory()
      .then(res => {
        console.log(res)
        this.leju = res.data.items.find(el => el.category.name == '乐居').children
      })

    findAllBrand()
      .then(res => {
        console.log(res)
        this.brandList = res.data.items
      })
  },
  mounted() {

  },
  methods: {
    uploadImg(val) {
      this.form.product.albumPics = this.form.product.albumPics + val.data.fileUrl + ','
    },
    getUploadImg(val, val1) {
      console.log('val', val, val1)
      // 如何把上传的结果塞入到知道额数据中  this.form.pmsSkuStockList[2]
      this.form.pmsSkuStockList[val1].pic = val.data.fileUrl
    },
    addSku() {
      var colorList = this.colorList.filter(ele => ele.isSelected)
      var sizeList = this.sizeList.filter(ele => ele.isSelected)
      if (!colorList.length) {
        this.$message.error('请选择颜色')
        return
      }
      if (!sizeList.length) {
        this.$message.error('请选择大小')
        return
      }
      // ["红色"，"蓝色"]   ["64g","128g"]
      colorList.forEach(ele => {
        sizeList.forEach(el => {
          var obj = {
            'createTime': '',
            'id': '',
            'lockStock': '',
            'lowStock': '',
            'modifyTime': '',
            'pic': '',
            'price': '',
            'productId': '',
            'promotionPrice': '',
            'sale': '',
            'skuCode': '',
            'spData': [{ 'key': '颜色', 'value': ele.name }, { 'key': '大小', 'value': el.name }], // [{"key":"颜色","value":"土豪金"},{"key":"大小","value":"128g"}]
            'stock': ''
          }
          this.form.pmsSkuStockList.push(obj)
        })
      })
    },
    save() {
      var obj = JSON.parse(JSON.stringify(this.form))
      obj.pmsSkuStockList.forEach(ele => {
        ele.spData = JSON.stringify(ele.spData)
      })
      if (this.$route.params.id1) {
        // 修改
        updateProductAndSkus(obj)
        return
      }
      addProductAndSkus(obj)
    },
    addColor() {
      if (!this.color) {
        return
      }
      this.colorList.push({
        name: this.color,
        isSelected: false,
        id: new Date().getTime()
      })
      this.color = ''
    },
    addSize() {
      if (!this.size) {
        return
      }
      this.sizeList.push({
        name: this.size,
        isSelected: false,
        id: new Date().getTime()
      })
      this.size = ''
    },
    getCategoryName(val) {
      console.log(val)
      var obj = this.leju.find(el => el.id == val)
      this.form.product.productCategoryName = obj.name
    },
    getBrandName(val) {
      console.log(val)
      var obj = this.brandList.find(el => el.id == val)
      this.form.product.brandName = obj.name
    }
  }
}
</script>

<style scoped lang="scss">

</style>
